/**
 * Created by yefan on 2017/9/20.
 */
nav = {
    //初始化方法S
    initNav: function(){
        this.start();
        this.scroll();
    },
    //初始化右侧页面
    start: function(){
        $('.par').prepend('<img class="liPar" src="./img/3.png">')
        //父节点点距离左侧距离
        var liPar = $('nav ul').css('padding-left')
        var pxPar = liPar.substring(0,liPar.length-2) - 2 + 'px'
        $('.liPar').css({position:'relative',right: pxPar})

        $('.chi').prepend('<img class="liChi" src="./img/3.png">')
        //父节点点距离左侧距离
        var liChi = $('nav ul').css('padding-left')
        var pxChi = liChi.substring(0,liPar.length-2)*2 - 2 + 'px'
        $('.liChi').css({position:'relative',right: pxChi})
    },
    //滚动监听
    scroll: function(){
        $(window).scroll(function () {
            //屏幕高度中点位置
            var halfOfHei = $(window).height()/2;
            //距离顶部的高度
            var toTop = window.scrollY;
            //现屏幕中点距离顶部的距离
            var distance = halfOfHei+toTop;
            //页面总高度
            var tall = $('.par,.chi').length*$('h2').height();
            /**
             * 页面位于第几块
             * 这个算法大致是算屏幕中间那一块的内容,所以最上面和最下面的算不到,会有误差
             */
            var k = Math.floor(distance/tall*12);


            //改变字的颜色
            $('.par,.chi').each(function(){
                $(this).css('color','#000')
            })
            $('.par,.chi').eq(k).css('color','red')

            //蓝色块距离顶部的距离
            // var blueTop = distance/tall*($('nav').height())
            // $('.blue').animate({top:blueTop + 'px'},10)
            $('.blue').css('display','block')
            var blueTop = $('.par,.chi').eq(k).find('img')[0].offsetTop
            $('.blue').animate({top:blueTop + 'px'},100)

        })
    }
}



$(function(){
    nav.initNav();
})